


export class Indicator {

    constructor() {
        this._indicator = null
    }

    set show(v) {
        if(!this._indicator) this._indicator = this._htmlDom()
        this._indicator.style.display = v ? 'display' : 'none'
    }

    
//     <button class="btn btn-dark" type="button" disabled>
//   <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
//   <span>Loading...</span>
// </button>
    _htmlDom() {
        const div = document.createElement('div')
        const cssStr = `
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 1vh;
        line-height: 100vh;
        text-align: center;
        `
        div.style.cssText = cssStr
        
        const div2 = document.createElement('div')
        // div2.style.cssText = cssStr
        div2.className = 'd-flex align-items-center justify-content-center'
        div.appendChild( div2 )
    
        const h = `
        <button type="button" class="btn btn-dark btn-lg" 
        style="height: 150px;width: 150px; border-radius: 8px; opacity: 0.8; box-shadow: 0 20px 80px #555;">
        <div class="spinner-border" role="status"></div>
        <br>
        <span class="visually-hidden">Loading...</span>
        </button>

    `
        div.innerHTML = h
        document.body.appendChild( div )
        return div
    }
}